<template>
  <div class="addList">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 步骤条 -->
    <!-- active:起始为0 -->
    <el-steps :active="activeName-0" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <!-- 标签页 -->
    <!-- activeName与name对应 -->
    <el-tabs v-model="activeName" tab-position="left">
      <el-tab-pane label="基本信息" name="0">
        <el-form
          :model="addtable"
          status-icon
          ref="addtable"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="addtable.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="addtable.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="addtable.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="addtable.goods_number"></el-input>
          </el-form-item>
          <!-- 级联选择器 -->
          <el-form-item label="商品列表">
            <el-cascader
              @change="changeList"
              clearable
              :options="dataList"
              :props="displayList"
              v-model="addtable.goods_cat"
              change-on-select
            ></el-cascader>
          </el-form-item>
        </el-form>

       
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片" name="3">
        <!-- 文件上传 -->
        <el-upload
          class="upload-demo"
          action="http://localhost:8888/api/private/v1/upload"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-upload="befordelet"
          :headers="gettoken()"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="4">
        <quill-editor
          v-model="addtable.goods_introduce"
          ref="myQuillEditor"
          :options="editorOption"
          style="height:400px;border-bottom:1px solid #ccc"
        ></quill-editor>
      </el-tab-pane>
       <!-- 添加按钮 -->
          <el-button @click="addGoods" type="warning" class="btn"> 添加商品</el-button>
    </el-tabs>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getListData} from "@/api/categories.js";
import { addGoods } from '@/api/goods.js'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption:{},
      // 用来存储图片的数组
      fileList: [],
      activeName: "0",
      displayList: {
        checkStrictly: true,
        label: "cat_name",
        value: "cat_id",
        children: "children"
      },
      addtable: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: [],
        goods_introduce: "",
        pics: [],
        attr: []
      },
      dataList: []
    };
  },
  methods: {
    addGoods(){
      addGoods(this.addtable).then(res=>{
        console.log(res)
        console.log(this.addtable)
         this.$router.push({ name: 'list' })
      })
     
    },
    //上传文件之前的钩子
    befordelet(file) {
      console.log(file);
      if (file.type.indexOf("image/") === -1) {
        this.$message({
          type: "warning",
          message: "请选择图片格式的文件"
        });
        return false;
      }
    },
    //移除图片触发的事件
    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      //  判断有没有图片进行删除
      if (!file.response) {
        return;
      } else {
        // 遍历pics里面的图片,对应的路径是否相等进行删除
        for (var i = 0; i < this.addtable.pics.length; i++) {
          if (this.addtable.pics[i].pic === response.data.tmp_path) {
            this.addtable.pics.splice(i, 1);
          }
        }
      }
    },
    //  文件上传成功之后的钩子
    handleSuccess(response, file, fileList) {
      console.log(response);

      this.addtable.pics.push({ pic: response.data.tmp_path });
    },
    //通过函数获取token传递的方法,记得要返回这个token
    gettoken() {
      var token = localStorage.getItem("heima_manerger_token");
      console.log(token);
      return { Authorization: token };
    },

    changeList(value) {
      console.log(value);
       this.addtable.goods_cat = value.join(',')
    }
  },
  mounted() {
    getListData([1, 2, 3]).then(res => {
      console.log(res);
      if (res.data.meta.status === 200) {
        this.dataList = res.data.data;
      }
    });
  }
};
</script>
<style lang="less" scoped>
.btn {
  float: right;
  margin-top:500px;
}
</style>

